<template>
  <div class="aside">
    <el-menu
      :default-active="page.asideIndex"
      class="el-menu-vertical-demo"
      @select="menuChange"
    >
      <el-menu-item index="1">
        <el-icon><House /></el-icon>
        <span>图片</span>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><Setting /></el-icon>
        <span>设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { useShotStore } from "@/store/store";
import { storeToRefs } from "pinia";

const shotStore = useShotStore();
const { page } = storeToRefs(shotStore);

const menuChange = (index: number) => {
  if (index === 4) return;
  page.value.asideIndex = index.toString();
};
</script>

<style scoped>
.aside {
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 5px;
}
.el-menu {
  border-right: unset !important;
}
.el-menu-item {
  box-sizing: border-box;
  border-color: var(--el-menu-active-color);
}
.is-active {
  border-left: 2px solid;
}
</style>
